<template>
  <div>
    <div
      style="width:100%;height:20px;border-bottom:1px solid rgb(233, 232, 232) ;line-height:5px "
    >助教管理</div>
    <br />
    <div class="div_nav-big">
      <div style="line-height:36px">状态</div>
      <div style="width:10px"></div>
      <div>
        <a-select v-model="usertrue" style="width: 120px">
          <a-select-option value="禁用">禁用</a-select-option>
          <a-select-option value="启用">启用</a-select-option>
        </a-select>
      </div>
      <div style="width:20px"></div>
      <div style="line-height:36px">学生名称</div>
      <div style="width:10px"></div>
      <div>
        <a-input placeholder="请输入学生关建字" v-model="username" />
      </div>
      <div style="width:20px"></div>
      <div style="line-height:36px">手机号</div>
      <div style="width:10px"></div>
      <div>
        <a-input placeholder="请输入手机号" v-model="usermodel" />
      </div>
      <div style="width:20px"></div>
      <div>
        <a-button icon="search" @click="submit">搜索</a-button>
      </div>
      <div style="width:10px"></div>
      <div>
        <a-button icon="reload" @click="usercx">重置</a-button>
      </div>
    </div>
    <div style="width:100%;height:3vh"></div>
    <a-table
      :rowKey="record => record.dataIndex"
      :pagination="pagination"
      bordered
      :columns="columns"
      :data-source="list"
    >
      <template slot="action" @click="deldte(index)" slot-scope="text, record,index">
        <a-popconfirm title="确认删除?" @confirm="list.splice(index,1)" okText="是" cancelText="否">
          <a href="javascript:;">删除</a>
        </a-popconfirm>
      </template>
    </a-table>
  </div>
</template>
<script>
import moment from "moment";
import axios from "axios";
const columns = [
  {
    title: "学生名称",
    dataIndex: "role_name",
  },
  {
    title: "手机号",
    dataIndex: "mobile",
  },
  {
    title: "状态",
    dataIndex: "mg_state",
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  data() {
    return {
      list: [],
      usertrue: "启用",
      username: "",
      usermodel: "",
      item: [],
      columns,
      selectedRowKeys: [],
      pagination: {
        defaultPageSize: 7,
        total: 0,
      }, // Check here to configure the default column
    };
  },

  computed: {
    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        selectedRowKeys,
        onChange: this.onSelectChange,
        hideDefaultSelections: true,
        selections: [
          {
            key: "all-data",
            text: "Select All Data",
            onSelect: () => {
              this.selectedRowKeys = [...Array(46).keys()]; // 0...45
            },
          },
          {
            key: "odd",
            text: "Select Odd Row",
            onSelect: (changableRowKeys) => {
              let newSelectedRowKeys = [];
              newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                if (index % 2 !== 0) {
                  return false;
                }
                return true;
              });
              this.selectedRowKeys = newSelectedRowKeys;
            },
          },
          {
            key: "even",
            text: "Select Even Row",
            onSelect: (changableRowKeys) => {
              let newSelectedRowKeys = [];
              newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                if (index % 2 !== 0) {
                  return true;
                }
                return false;
              });
              this.selectedRowKeys = newSelectedRowKeys;
            },
          },
        ],

        onSelection: this.onSelection,
      };
    },
  },

  methods: {
    deldte(index) {
      this.list.splice(index, 1);
    },
    usercx() {
      this.list = [...this.item];
      this.pagination.total = this.list.length;
    },
    submit() {
      console.log(11);
      this.list = [];

      this.item.forEach((ele) => {
        if (
          ele.role_name === this.username &&
          ele.mg_state === this.usertrue &&
          ele.mobile === this.usermodel
        ) {
          this.list.push(ele);
        }
      });
      this.pagination.total = this.list.length;
      this.username = "";
      this.usertrue = "启用";
      this.usermodel = "";
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
  },

  mounted() {
    axios
      .get("http://localhost:8080/userlist.json")
      .then((res) => {
        console.log(res.data.data.users);
        this.list = res.data.data.users;
        this.item = [...this.list];
        this.list.forEach((ele) => {
          var mg_state = "禁用";

          if (ele.mg_state === false) {
            ele.mg_state = mg_state;
            this.list.push(ele);
          } else {
            var mg_state = "启用";
            if (ele.mg_state === true) {
              ele.mg_state = mg_state;
              this.list.push(ele);
            }
          }
        });
        this.item.forEach((ele) => {
          var mg_state = "禁用";

          if (ele.mg_state === false) {
            ele.mg_state = mg_state;
            this.item.push(ele);
          } else {
            var mg_state = "启用";
            if (ele.mg_state === true) {
              ele.mg_state = mg_state;
              this.item.push(ele);
            }
          }
        });
        this.list.forEach((ele) => {
        
          ele.create_time = moment(ele.create_time).format("YYYY-MM-DD");
        });
      })
      .catch((err) => {
        console.error(err);
      });
  },
};
</script>
<style scoped>
.div_nav-big {
  display: inline-flex;
  justify-content: center;
}
</style>